/** 
* 课程
*/
<template>
  <el-form v-loading="loading" :model="formData" :rules="type == 'add' || type == 'edit' || type == 'revision' ? formRules : {}" ref="formRef" label-width="150px" :scroll-to-error="true">
    <vp-card>
      <el-row>
        <vp-col :span="4">
            <el-form-item prop="bh">
                <template #label><vp-label zh="课程编号" en="Course No." align="left"/></template>
                <el-input v-model="formData.bh" v-trim maxlength="100" v-if="!bhDisabled && (type == 'add' || type == 'edit' || type == 'revision')">
                </el-input>
                <vp-text v-else>{{ formData.bh }}</vp-text>
            </el-form-item>
        </vp-col>
        <vp-col :span="4">
					<el-form-item prop="mcZw">
						<template #label><vp-label zh="课程名称(中)" en="Couse Name" align="left"/></template>
						<el-input v-if="!mcDisabled && (type == 'add' || type == 'edit' || type == 'revision')" v-model="formData.mcZw" v-trim maxlength="100"></el-input>
            <vp-text v-else >{{ formData.mcZw }}</vp-text>
          </el-form-item>
				</vp-col>
        <vp-col :span="4">
					<el-form-item prop="mcYw">
						<template #label><vp-label zh="课程名称(英)" en="Course EN Name" align="left"/></template>
						<el-input v-if="!mcDisabled && (type == 'add' || type == 'edit' || type == 'revision')" v-model="formData.mcYw" v-trim maxlength="100"></el-input>
            <vp-text v-else >{{ formData.mcYw }}</vp-text>
          </el-form-item>
				</vp-col>
        <vp-col :span="4">
          <el-form-item prop="kclb">
            <template #label><vp-label zh="课程类别" en="Couse Category" align="left"/></template>
            <VpDictSelect :lxid="601" :selectedId="formData.kclb" @dictSelected="obj => { formData.kclb = obj; }"
              style="width:100%" v-if="type!='view'">
            </VpDictSelect>
            <vp-text v-else>{{ formData.kclb }}</vp-text>
          </el-form-item>
        </vp-col>
      </el-row>
      <el-row>
        <vp-col :span="4">
          <el-form-item prop="acTypeList">
            <template #label><vp-label zh="适用机型" en="Applicable AC Type" align="left"/></template>
            <el-input v-if="type!='view'" v-model="formData.acTypeList" v-trim readonly>
              <template #append>
                <el-button @click="handleChooseBaseDataModelMult">
                  <SvgIcon name="ele-Search" />
                </el-button>
              </template>
            </el-input>
            <span v-else v-for="(item, index) in formData.acTypeList" :key="index">
              <el-tag> {{ item }} </el-tag>&nbsp;
            </span>
          </el-form-item>
        </vp-col>
        <vp-col :span="4">
          <el-form-item prop="ks">
            <template #label><vp-label zh="课时" en="HRS" align="left"/></template>
                <el-input v-model.trim="formData.ks" @input="(val:string) => formData.ks = verifyNumberIntegerAndFloat(val)" maxlength="10" v-if="type == 'add' || type == 'edit' || type == 'revision'">
                      <template #append>
                        <span>Hrs</span>
                    </template>
                </el-input>
                <vp-text v-else>{{ formData.ks || formData.ks == 0 ? (formData.ks + 'Hrs') : '' }}</vp-text>
          </el-form-item>
        </vp-col>
        <vp-col :span="4">
          <el-form-item prop="pxxs">
            <template #label><vp-label zh="培训形式" en="Train Format" align="left"/></template>
            <VpDictSelect :lxid="602" :selectedId="formData.pxxs" @dictSelected="obj => { formData.pxxs = obj; }"
              style="width:100%" v-if="type!='view'">
            </VpDictSelect>
            <vp-text v-else>{{ formData.pxxs }}</vp-text>
          </el-form-item>
        </vp-col>
        <vp-col :span="4">
          <el-form-item prop="ksxs">
            <template #label><vp-label zh="考试形式" en="Exam. Format" align="left"/></template>
            <VpDictSelect :lxid="603" :selectedId="formData.ksxs" @dictSelected="obj => { formData.ksxs = obj; }"
              style="width:100%" v-if="type!='view'">
            </VpDictSelect>
            <vp-text v-else>{{ formData.ksxs }}</vp-text>
          </el-form-item>
        </vp-col>
      </el-row>
      <el-row>
        <vp-col :span="3">
          <el-form-item prop="fxbs">
            <template #label><vp-label zh="是否复训" en="Retrain" align="left" /></template>
            <el-radio-group v-model="formData.fxbs" v-if="type!='view'">
              <el-radio :label="10" :key="10">{{ "是/Yes" }}</el-radio>
              <el-radio :label="20" :key="20">{{ '否/No' }}</el-radio>
            </el-radio-group>
            <vp-text v-else>{{ formData.fxbs == 10 ? "是/Yes" : formData.fxbs == 20 ? "否/No" : "" }}</vp-text>
          </el-form-item>
        </vp-col>
      </el-row>
      <el-row v-if="formData.fxbs == 10">
        <vp-col :span="4">
          <el-form-item prop="zqz">
            <template #label><vp-label zh="复训周期" en="Retrain Cycle" align="left"/></template>
                <el-input v-model.trim="formData.zqz" @input="(val:string) => formData.zqz = verifiyNumberInteger(val)" maxlength="10" v-if="type == 'add' || type == 'edit' || type == 'revision'">
                      <template #append>
                        <el-select v-model="formData.zqdw" style="width:70px">
                              <el-option label="D" :value=11></el-option>
                              <el-option label="M" :value=12></el-option>
                          </el-select>
                    </template>
                </el-input>
                <vp-text v-else>{{ formData.zqz}}{{ formData.zqdw == 11 ? 'D' : formData.zqdw == 12 ? 'M' : '' }}</vp-text>
          </el-form-item>
        </vp-col>
        <vp-col :span="4">
          <el-form-item prop="fxks">
            <template #label><vp-label zh="复训课时" en="Retrain HRS" align="left"/></template>
                <el-input v-model.trim="formData.fxks" @input="(val:string) => formData.fxks = verifyNumberIntegerAndFloat(val)" maxlength="10" v-if="type == 'add' || type == 'edit' || type == 'revision'">
                    <template #append>
                      <span>Hrs</span>
                    </template>
                </el-input>
                <vp-text v-else>{{ formData.fxks || formData.fxks == 0 ? (formData.fxks + 'Hrs') : '' }}</vp-text>
          </el-form-item>
        </vp-col>
        <vp-col :span="4">
          <el-form-item prop="fxpxxs">
            <template #label><vp-label zh="复训培训形式" en="Train Format" align="left"/></template>
            <VpDictSelect :lxid="602" :selectedId="formData.fxpxxs" @dictSelected="obj => { formData.fxpxxs = obj; }"
              style="width:100%" v-if="type!='view'">
            </VpDictSelect>
            <vp-text v-else>{{ formData.fxpxxs }}</vp-text>
          </el-form-item>
        </vp-col>
        <vp-col :span="4">
          <el-form-item prop="fxksxs">
            <template #label><vp-label zh="复训考试形式" en="Exam. Format" align="left"/></template>
            <VpDictSelect :lxid="603" :selectedId="formData.fxksxs" @dictSelected="obj => { formData.fxksxs = obj; }"
              style="width:100%" v-if="type!='view'">
            </VpDictSelect>
            <vp-text v-else>{{ formData.fxksxs }}</vp-text>
          </el-form-item>
        </vp-col>
      </el-row>
      <el-row>
        <vp-col :span="4">
          <el-form-item prop="kzxxbs">
            <template #label><vp-label zh="加入扩展学习" en="Join extended learn" align="left"/></template>
            <el-checkbox :disabled="type=='view'"
              v-model="formData.kzxxbs" 
              :true-value="10" 
              :false-value="20">
          </el-checkbox>
          </el-form-item>
        </vp-col>
        <vp-col :span="4">
          <el-form-item prop="pxjg">
            <template #label><vp-label zh="培训机构" en="Training Institution" align="left"/></template>
            <el-input v-model.trim="formData.pxjg" maxlength="100" v-if="type == 'add' || type == 'edit' || type == 'revision'">
            </el-input>
            <vp-text v-else>{{ formData.pxjg }}</vp-text>
          </el-form-item>
        </vp-col>
        <vp-col :span="4">
          <el-form-item prop="kcly">
            <template #label><vp-label zh="课程来源" en="Course Source" align="left"/></template>
            <el-input v-model.trim="formData.kcly" maxlength="100" v-if="type == 'add' || type == 'edit' || type == 'revision'">
            </el-input>
            <vp-text v-else>{{ formData.kcly }}</vp-text>
          </el-form-item>
        </vp-col>
        
        <vp-col :span="4">
          <el-form-item prop="jcsm">
            <template #label><vp-label zh="教材说明" en="Textbook Desc" align="left"/></template>
            <el-input v-model.trim="formData.jcsm" maxlength="100" v-if="type == 'add' || type == 'edit' || type == 'revision'">
            </el-input>
            <vp-text v-else>{{ formData.jcsm }}</vp-text>
          </el-form-item>
        </vp-col>
        
      </el-row>
      <el-row>
        <vp-col :span="2">
					<el-form-item prop="pxmb">
						<template #label><vp-label zh="培训目标" en="Training Objectives" align="left"/></template>
						<el-input type="textarea" v-if="type == 'add' || type == 'edit' || type == 'revision'" v-model="formData.pxmb" v-trim maxlength="1000" rows="3"></el-input>
            <vp-text v-else>{{ formData.pxmb }}</vp-text>
          </el-form-item>
				</vp-col>
        <vp-col :span="2">
					<el-form-item prop="kcnr">
						<template #label><vp-label zh="课程内容" en="Course Content" align="left"/></template>
						<el-input type="textarea" v-if="type == 'add' || type == 'edit' || type == 'revision'" v-model="formData.kcnr" v-trim maxlength="1000" rows="3"></el-input>
            <vp-text v-else>{{ formData.kcnr }}</vp-text>
          </el-form-item>
				</vp-col>
        <vp-col :span="2">
					<el-form-item prop="jyyq">
						<template #label><vp-label zh="教员要求" en="Teacher Requirements" align="left"/></template>
						<el-input type="textarea" v-if="type == 'add' || type == 'edit' || type == 'revision'" v-model="formData.jyyq" v-trim maxlength="1000" rows="3"></el-input>
            <vp-text v-else>{{ formData.jyyq }}</vp-text>
          </el-form-item>
				</vp-col>
        <vp-col :span="2">
					<el-form-item prop="bz">
						<template #label><vp-label zh="备注" en="Remark" align="left"/></template>
						<el-input type="textarea" v-if="type == 'add' || type == 'edit' || type == 'revision'" v-model="formData.bz" v-trim maxlength="1000" rows="3"></el-input>
            <vp-text v-else>{{ formData.bz }}</vp-text>
          </el-form-item>
				</vp-col>
      </el-row>
    </vp-card>
    <VpCoursewareCard :attachmentList="formData.textBooks" @attachmentListEmit="getTextBooks" :readOnly="!(type == 'add' || type == 'edit' || type == 'revision')">
      <template #header>
        <vp-label zh="教材/课件" en="Textbook/Courseware"/>
      </template>
    </VpCoursewareCard>

    <BasedataModelMultDialog ref="basedataModelMultDialogRef" @confirm="basedataModelMultConfirm">
    </BasedataModelMultDialog>
  </el-form>
</template>
<script setup lang="ts" name="course">
import { defineAsyncComponent, onMounted, ref, watch } from "vue";
import request from "/@/utils/request";
import validateUtils from "/@/utils/validateUtils";
import { verifyNumberIntegerAndFloat, verifiyNumberInteger } from '/@/utils/toolsValidate';
import VpCoursewareCard from '/@/components/vp/file/VpCoursewareCard.vue';
import VpFileListCard from '/@/components/vp/file/VpFileListCard.vue';
import VpDictSelect from '/@/components/vp/dict/VpDictSelect.vue';
import { ElMessage } from "element-plus";
import router from "/@/router";

import VpDictSelectMulit from '/@/components/vp/dict/VpDictSelectMulit.vue';
const BasedataModelMultDialog = defineAsyncComponent(() => import('/@/components/vp/basedata/basedataModelMultDialog.vue'));

const emits = defineEmits(['formSubmited', 'nwChange']);

const formData = ref({
  id: null,
  sjbb: null,
  zt: null,
  bh: "",
  mcZw: "",
  mcYw: "",
  kclb: "",
  ks: "",
  pxxs: "",
  ksxs: "",
  fxbs: 0,
  fxks: "",
  fxpxxs: "",
  fxksxs: "",
  zqz: "",
  zqdw: 12,
  pxjg: "",
  kcly: "",
  jcsm: "",
  kzxxbs: 0,
  pxmb: "",
  kcnr: "",
  jyyq: "",
  bz: "",
  zid: "",
  acTypeList: [],
  textBooks: [],
});
const formRules = {
    bh:[ 
      validateUtils.notNull,
    ],
    mcZw: [
      validateUtils.notNull
    ],
    kclb: [
      validateUtils.notNull
    ],
    ks: [
      validateUtils.notNull,
      validateUtils.num2
    ],
    pxxs: [
      validateUtils.notNull,
    ],
    ksxs: [
      validateUtils.notNull,
    ],
    fxbs: [
      validateUtils.notNull,
    ],
    zqz: [
      validateUtils.notNull,
      validateUtils.integer
    ],
    zqdw: [
        validateUtils.notNull
    ],
    fxks: [
      validateUtils.notNull,
    ],
    fxpxxs: [
      validateUtils.notNull,
    ],
    fxksxs: [
      validateUtils.notNull,
    ],
}

const initFormData = () =>{
    formData.value = {
      id: null,
      sjbb: null,
      zt: null,
      bh: "",
      mcZw: "",
      mcYw: "",
      kclb: "",
      ks: "",
      pxxs: "",
      ksxs: "",
      fxbs: 0,
      fxks: "",
      fxpxxs: "",
      fxksxs: "",
      zqz: "",
      zqdw: 12,
      pxjg: "",
      kcly: "",
      jcsm: "",
      kzxxbs: 0,
      pxmb: "",
      kcnr: "",
      jyyq: "",
      bz: "",
      zid: "",
      acTypeList: [],
      textBooks: [],
    }
}

const type = ref('add');
const loading = ref(false);
const formRef = ref();

const props = defineProps<{
  id: string,
  type: string,
  nwbsDisabled: {
    type: Boolean,
    default: false,
  },
  bhDisabled: {
    type: Boolean,
    default: false,
  },
  mcDisabled: {
    type: Boolean,
    default: false,
  },
}>()

watch(() => formData.value.acTypeList, () => {
  formData.value.acTypes = formData.value.acTypeList.map(item => {return {jx: item}});
});

onMounted(() => {
  handleOpen(props.type, props.id);
})

const handleOpen = (_type: string, id: string) =>{
  type.value = _type;
      initFormData();
      if (type.value != "add") {
        loading.value = true;
        request.get(`/training/course/${id}`).then((res) => {
          formData.value= {
            ...formData.value,
            ...res.data,
          };
          formData.value.acTypeList = res.data.acTypes?res.data.acTypes.map(item => {return item.jx}):[];
          loading.value = false;
          emits("formSubmited", formData.value);
        });
      }
}

const getTextBooks = (list: any) =>{
  formData.value.textBooks = list;
}

const getData = (zt:number): Promise<any> => {
      let promise = new Promise((resolve, reject) => {
        if(formData.value.fxbs == 20){
          formData.value.zqz = ""
          formData.value.zqdw = null
          formData.value.fxks = ""
          formData.value.fxpxxs = ""
          formData.value.fxksxs = ""
        }
        if (zt === 10) {
            resolve({
                ...formData.value,
            });
            return;
        }
        formRef.value.validate((valid: boolean) => {
            if (valid) {
              resolve({
                ...formData.value,
              });
            } else {
              reject();
            }
        })  
      })
      return promise;
    };

const basedataModelMultDialogRef = ref();
const handleChooseBaseDataModelMult = () => {
  basedataModelMultDialogRef.value.handleOpen();
}

const basedataModelMultConfirm = (data: any) => {
  formData.value.acTypeList = data.map((item: any) => item.jx);
}

defineExpose({
  getData
})

</script>